export { SiderItem, siderSizes } from './sider-item'

import { useObservable } from '@gnlab/utils/env-react/rx'
import { Spin, App as AntdApp } from 'antd'
import { spin } from '@/desktop/styles'
import { useStreams } from '@/lib/utils'
import services from '@/services'
import { LoginStatus } from '@/services/auth'
import Login from '../login'
import { AntdWrapper } from './init/antd'
import { ErrorBoundary } from './init/error'
import { AppLayout } from './layout'

export function App() {
  return <AntdWrapper>
    <ErrorBoundary>
      <AppContent />
    </ErrorBoundary>
  </AntdWrapper>
}

function AppContent() {
  const { modal } = AntdApp.useApp()
  useObservable(services.auth.unauthorized$, _message => {
    modal.confirm({
      title: '登录已失效，请重新登录',
      content: _message ?? '',
      cancelButtonProps: { style: { display: 'none' } },
    })
  })

  useEffect(() => {
    void services.netlog.send('enter-app', {
      ua: navigator.userAgent,
      url: location.href,
    })
  }, [])

  const [info] = useStreams(services.auth.info$)
  if (info.status === LoginStatus.NeedConfirm) return <AuthConfiming />
  else if (info.status !== LoginStatus.LoggedIn) return <Login />
  else return <AppLayout />
}

function AuthConfiming() {
  return <Spin tip="正在确认登录状态" css={[spin(42), { marginTop: '35vh' }]}>
    <i />
  </Spin>
}
